<template>
  <div>
    <el-table v-loading="loading" :data="dataSource" border :height="autoHeight">
      <el-table-column prop="jdbcOrder" label="顺序" align="center" width="100px">
        <template slot-scope="scope">
          <el-input-number v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label" controls-position="right" clearable style="width: 100%"></el-input-number>
          <span v-else>{{scope.row[scope.column.property]}}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="select" prop="jdbcTable" label="表名" align="center" min-width="150px" show-overflow-tooltip>
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
        <template slot-scope="scope">
          <el-input v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label" clearable></el-input>
          <span v-else>{{scope.row[scope.column.property]}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="jdbcName" label="列名" align="center" min-width="150px" show-overflow-tooltip>
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
        <template slot-scope="scope">
          <el-input v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label" clearable></el-input>
          <span v-else>{{scope.row[scope.column.property]}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="jdbcType" label="类型" align="center" width="150px">
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-select v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)" style="width: 100%">
            <el-option v-for="item in jdbcTypes" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
        </template>
        <template slot-scope="scope">
          <el-select v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label" clearable style="width: 100%">
            <el-option v-for="item in jdbcTypes" :key="item.value" :value="item.value" :label="item.label" />
          </el-select>
          <span v-else>{{jdbcTypes.find(item => item.value === scope.row.jdbcType) ?.label}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="jdbcComment" label="备注" align="center" min-width="150px" show-overflow-tooltip>
        <template slot="header" slot-scope="scope">
          <div>{{ scope.column.label }}</div>
          <el-input v-model="filterModel[scope.column.property]" :placeholder="scope.column.label + '过滤'" clearable @change="filterChange(scope.column.property)"></el-input>
        </template>
        <template slot-scope="scope">
          <el-input v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label" clearable></el-input>
          <span v-else>{{scope.row[scope.column.property]}}</span>
        </template>
      </el-table-column>
      <template v-if="!select">
        <el-table-column prop="jdbcLength" label="长度" align="center" width="120px">
          <template slot-scope="scope">
            <el-input-number v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label" controls-position="right" clearable style="width: 100%"></el-input-number>
            <span v-else>{{scope.row[scope.column.property]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="jdbcDigit" label="小数位数" align="center" width="100px">
          <template slot-scope="scope">
            <el-input-number v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label" controls-position="right" clearable style="width: 100%"></el-input-number>
            <span v-else>{{scope.row[scope.column.property]}}</span>
          </template>
        </el-table-column>
      </template>
      <el-table-column prop="jdbcNullAble" label="可为空" align="center" width="90px">
        <template slot-scope="scope">
          <el-switch v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label"></el-switch>
          <span v-else>{{scope.row[scope.column.property] ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="jdbcKey" label="主键" align="center" width="90px">
        <template slot-scope="scope">
          <el-switch v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label"></el-switch>
          <span v-else>{{scope.row[scope.column.property] ? '是' : '否' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="jdbcDefault" label="默认值" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input v-if="scope.row.editAbled" v-model="scope.row[scope.column.property]" :placeholder="scope.column.label" clearable></el-input>
          <span v-else>{{scope.row[scope.column.property]}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="130px">
        <template slot="header" slot-scope="scope">
          <el-button v-if="scope && select" type="primary" @click="selectAll" icon="el-icon-circle-plus-outline">全选</el-button>
          <el-button v-else type="primary" @click="addColumn" icon="el-icon-circle-plus-outline">新增</el-button>
        </template>
        <template slot-scope="scope">
          <template v-if="scope.row.jdbcState === -1">
            <el-button v-if="scope.row.jdbcState === -1" type="warning" icon="el-icon-refresh-right" circle @click="() => { scope.row.jdbcState = 0 }" title="还原"></el-button>
          </template>
          <template v-else>
            <template v-if="select">
              <el-button type="success" icon="el-icon-thumb" circle @click="$emit('rowSelect',scope.row)" title="选择"></el-button>
            </template>
            <template v-else>
              <el-button v-if="scope.row.editAbled" type="warning" icon="el-icon-circle-check" circle @click="saveColumn(scope.row)" title="保存"></el-button>
              <el-button v-else type="success" icon="el-icon-edit" circle @click="() => { $set(scope.row, 'editAbled', true)}" title="编辑"></el-button>
<!--              <el-button v-if="!scope.row.editAbled" type="warning" icon="el-icon-setting" circle @click="settingColumn(scope.row)" title="设置"></el-button>-->
              <el-button type="danger" icon="el-icon-delete" circle @click="removeColumn(scope.row, scope.$index)" title="删除"></el-button>
            </template>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <div class="lab-table-page">
      <div style="display: inline-flex">
        <el-pagination
            :disabled="loading"
            :current-page="pageInfo.page"
            :page-sizes="[20, 50, 100, 200, 500]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
        <el-button-group style="padding: 2px 5px">
          <el-button icon="el-icon-refresh" title="刷新" :disabled="loading" @click="loadSource([])" />
        </el-button-group>
      </div>
    </div>
    <el-dialog :visible.sync="visible" title="数据列设置" width="80%" append-to-body :close-on-click-modal="false" destroy-on-close>
      <column-relation :lab-db="labDb" :column-info="columnInfo" />
    </el-dialog>
  </div>
</template>

<script>
import IdeaTable from "@/mixins/IdeaTable";
import ColumnRelation from "@/views/system/db/ColumnRelation";

export default {
  name: "ColumnTable",
  components: {ColumnRelation},
  mixins: [IdeaTable],
  props: {
    labDb: {
      type: Object,
      default: function () {
        return {}
      }
    },
    jdbcTable: {
      type: Object,
      default: function () {
        return { columns: [] }
      }
    },
    select: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      jdbcTypes: [
        { value: 'varchar', label: '字符串' },{ value: 'text', label: '文本域' },{ value: 'json', label: 'JSON' },{ value: 'bigint', label: '大整数' },{ value: 'decimal', label: '小数' },
        { value: 'date', label: '日期' },{ value: 'datetime', label: '日期时间' },{ value: 'bit', label: '布尔' },{ value: 'int', label: '小整数' },
      ],
      activeName: 'dict',
      columnInfo: {}
    }
  },
  computed: {
    autoHeight(){
      return this.appInfo && this.appInfo.appId !== '0' ? `calc(100vh - 375px)` : `calc(100vh - 320px)`
    }
  },
  created() {
    this.queryUrl = `db/columns/${this.labDb.dbId}`
    this.removeUrl = 'db/delete/'
    this.saveUrl = 'db/save'
    this.rowKey = 'jdbcName'
    this.pageInfo.pageSize = 500
    if (!this.jdbcTable.columns) {
      this.$set(this.jdbcTable, 'columns', [])
    }
    if (this.jdbcTable.jdbcName) {
      this.addFilter({ field: 'jdbcTable',op:'=',value: this.jdbcTable.jdbcName })
    }
    this.loadSource()
  },
  methods: {
    removeColumn(row, index){
      if (row.jdbcTable) {
        row.jdbcState = -1;
        this.saveColumn(row)
      } else {
        this.dataSource.splice(index, 1)
      }
    },
    saveColumn(row){
      row.jdbcState = row.jdbcState || 2;
      if (!this.jdbcTable.columns) {
        this.$set(this.jdbcTable, 'columns', [])
      }
      const index = this.jdbcTable.columns.findIndex(item => item.jdbcName === row.jdbcName)
      if (index > -1) {
        this.jdbcTable.columns.splice(index, 1, row)
      } else {
        this.jdbcTable.columns.push(row)
      }
      row.editAbled = false
    },
    addColumn(){
      this.dataSource.splice(0, 0,
          { jdbcState: 1, jdbcType: 'varchar', jdbcLength: 100, jdbcDigit: 0,
            editAbled: true, jdbcNullAble: true, jdbcKey: false, jdbcOrder: this.dataSource.length + 1 })
    },
    settingColumn(row) {
      this.$Util.cleanObj(this, this.columnInfo)
      this.$Util.copyAttr(row, this.columnInfo, null, this)
      this.visible = true
    },
    selectAll() {
      this.dataSource.forEach(item => {
        this.$emit('rowSelect',item)
      })
      this.$resultMsg(this, { code: 200, msg: '全选完成' })
    }
  }
}
</script>

<style scoped>

</style>
